<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>AOS - Animate on scroll library</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="dist/aos.css" />
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="aos-anchors">
      <div class="aos-anchors__lines"></div>
      <div class="aos-anchors__sidebar">
        <div data-id="1" data-aos="fade-up" data-aos-anchor="[data-anchor-id='1']" data-aos-anchor-placement="top-top">
          Anchor: 1
        </div>
        <div data-id="2" data-aos="fade-up" data-aos-anchor="[data-anchor-id='2']" data-aos-anchor-placement="center-top">
          Anchor: 2
        </div>
        <div data-id="3" data-aos="fade-up" data-aos-anchor="[data-anchor-id='3']" data-aos-anchor-placement="bottom-top">
          Anchor: 3
        </div>
        <div data-id="4" data-aos="fade-up" data-aos-anchor="[data-anchor-id='4']" data-aos-anchor-placement="top-center">
          Anchor: 4
        </div>
        <div data-id="5" data-aos="fade-up" data-aos-anchor="[data-anchor-id='5']" data-aos-anchor-placement="center-center">
          Anchor: 5
        </div>
        <div data-id="6" data-aos="fade-up" data-aos-anchor="[data-anchor-id='6']" data-aos-anchor-placement="bottom-center">
          Anchor: 6
        </div>
        <div data-id="7" data-aos="fade-up" data-aos-anchor="[data-anchor-id='7']" data-aos-anchor-placement="top-bottom">
          Anchor: 7
        </div>
        <div data-id="8" data-aos="fade-up" data-aos-anchor="[data-anchor-id='8']" data-aos-anchor-placement="center-bottom">
          Anchor: 8
        </div>
        <div data-id="9" data-aos="fade-up" data-aos-anchor="[data-anchor-id='9']" data-aos-anchor-placement="bottom-bottom">
          Anchor: 9
        </div>
      </div>
      <div class="aos-anchors__content">
        <div data-anchor-id="1" data-placement="top-top"></div>
        <div data-anchor-id="2" data-placement="center-top"></div>
        <div data-anchor-id="3" data-placement="bottom-top"></div>
        <div data-anchor-id="4" data-placement="top-center"></div>
        <div data-anchor-id="5" data-placement="center-center"></div>
        <div data-anchor-id="6" data-placement="bottom-center"></div>
        <div data-anchor-id="7" data-placement="top-bottom"></div>
        <div data-anchor-id="8" data-placement="center-bottom"></div>
        <div data-anchor-id="9" data-placement="bottom-bottom"></div>
      </div>
    </div>

    <script src="dist/aos.js"></script>
    <script>
      if (!window.Cypress) AOS.init();
    </script>
  </body>
</html>
